<template>
    <div class="city_body">
      
        <div class="city_list">
            <Scroller ref='city_list'>	
                <div>
                    <div class="city_hot">
                            <h2>热门城市</h2>
                            <ul class="clearfix">
                                <li v-for="item in hostList" :key='item.id' @tap ="handleToCity(item.nm,item.id)" >{{ item.nm }}</li>
                            </ul>
                    </div>
                    <div class="city_sort" ref="city_sort">
                        <div v-for="item in cityList" :key='item.index'>
                            <h2>{{item.index}}</h2>
                            <ul>
                                <li v-for="itemList in item.list" :key='itemList.id' @tap ="handleToCity(itemList.nm,itemList.id)">{{itemList.nm}}</li>
                            </ul>
                        </div>
                    </div> 
                </div>
            </Scroller>	
        </div>
        <div class="city_index">
            <ul>
                <li v-for="(item,index) in cityList" :key='item.index' @touchstart="handleToIndex(index)">{{item.index}}</li>
            </ul>
        </div> 
             
    </div>
		
</template>

<script>
import { METHODS } from 'http';
import { hostname } from 'os';
export default {
    name:'City',
    data(){
        return{
            cityList:[],
            hostList:[]
        }
    },
    mounted(){
        var cityList = window.localStorage.getItem('cityList');
        var hostList = window.localStorage.getItem('hostList');
        if(cityList&&cityList){
            this.cityList=JSON.parse(cityList);
            this.hostList = JSON.parse(hostList);    
        }
        else{
        this.axios.get('/api/cityList').then((res)=>{
          var msg=res.data.msg;
          if(msg==='ok'){
              var data = res.data.data.cities;
              var {cityList,hostList}=this.formatCityList(data);
              this.cityList=cityList;
              this.hostList=hostList;
              window.localStorage.setItem('cityList',JSON.stringify(cityList));
              window.localStorage.setItem('hostList',JSON.stringify(hostList));
          }
        })}
    },
    methods:{
        formatCityList(cities){
            var cityList=[],hostList=[];
            for(var i=0;i<cities.length;i++){
                var firstLetter = cities[i].py.substring(0,1).toUpperCase();
                if(toCom(firstLetter)){
                  cityList.push(
                      {
                          index:firstLetter,list:[{nm:cities[i].nm,id:cities[i].id}]
                      }
                  )      
                }
                else{
                    for(var j =0;j<cityList.length;j++){
                        if(cityList[j].index===firstLetter){
                            cityList[j].list.push({nm:cities[i].nm,id:cities[i].id})
                        }
                    }
                }
            }
            for(var i=0;i<cities.length;i++){
                if(cities[i].isHot===1){
                    hostList.push(cities[i]);
                }
            }
            // A-z排序
            cityList.sort((n1,n2)=>{
                if(n1.index>n2.index){
                    return 1;
                }
                else if(n1.index<n2.index){
                    return -1;
                }
                else{
                    return 0;
                }
            })
            function toCom(firstLetter){
                for(let item of cityList){
                    if(item.index===firstLetter){
                        return false;
                    }
                }
                return true;
            }
           return{
               cityList,hostList
           }
        },
        handleToIndex(index){
            var h2 = this.$refs.city_sort.getElementsByTagName('h2');
            // this.$refs.city_sort.parentNode.scrollTop = h2[index].offsetTop;
            this.$refs.city_list.toScrollTop(-h2[index].offsetTop);
        },
        handleToCity(nm,id){
            this.$store.commit('city/CITY_INFO',{nm,id});//修改状态管理值
            window.localStorage.setItem('nowNm',nm);
            window.localStorage.setItem('nowId',id);
            this.$router.push('/movie/nowPlaying');//跳转页面
        }

    }
}
</script>

<style scoped>
#content .city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
.city_body .city_list::-webkit-scrollbar{
    background-color:transparent;
    width:0;
}
.city_body .city_hot{ margin-top: 20px;}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}

.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}

.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;}

</style>